<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>


<div id="app">

    <!--展示-->
    <div v-if="mode=='show'">
        <button @click="toAdd">添加</button>
        <table border="1" cellspacing="0">
            <tr>
                <td>编号</td>
                <td>书名</td>
                <td>类型</td>
                <td>作者</td>
                <td>状态</td>
                <td>价格</td>
                <td>操作</td>
            </tr>
            <tr v-for="a in tableData">
                <td>{{a.id}}</td>
                <td>{{a.name}}</td>
                <td>{{a.type}}</td>
                <td>{{a.author}}</td>
                <td>{{a.sell==1?"在售":"下架"}}</td>
                <td>{{a.money}}</td>
                <td>
                    <button>修改</button>
                    <button>添加</button>
                </td>
            </tr>
        </table>
    </div>
    <!--添加-->
    <div v-if="mode=='add'">

        书名: <input type="text" v-model="book.name"><br>
        <button @click="addBook">提交</button>

    </div>
    <!--修改-->
    <div v-if="mode=='edit'"> </div>



</div>
<script>

    new Vue({
        el:"#app",
        data:{
            mode:"show",
            tableData:[],
            book:{

                  type:[],
                  author:"",
                  sell:""

            }
        },
        methods:{
            toAdd(){
                this.mode="add"
            },
            addBook(){
                this.mode="show"
            }
        },
        created(){

            this.tableData.push({
                id :1,
                name:"哈哈哈",
                type:"恐怖，警匪",
                author:"小明",
                sell:1,
                money:200
            })
            this.tableData.push({
                id :2,
                name:"格林童话",
                type:"恐怖，搞笑",
                author:"小天",
                sell:2,
                money:300
            })
            this.tableData.push({
                id :3,
                name:"的地方",
                type:"恐怖，科幻",
                author:"等等",
                sell:1,
                money:200
            })
        }
    })
</script>

</body>
</html>